import React from "react"

/*
* 给元素标签设置ref，目的：获取对应的DOM元素
*   给类组件设置ref，目的：获取当前组件的实例
*   给函数组件设置ref，直接报错
*       + 但是我们永 React.forwardRef 实现 ref 的转发
*       + 目的：获取函数组件内部的某个元素

* */

class Child1 extends React.Component {
    state = {
        x: 10, y: 20
    }

    render() {
        return <div>
            子组件1
            <em ref={x => this.emBox = x}></em>
        </div>
    }
}

const Child2 = React.forwardRef(function (props, ref) {
    console.log(ref);// 我们调用Child2时，设置的ref属性值(函数)
    return <div>
        子组件2
        <button ref={ref}>按钮</button>
    </div>
})

class Demo extends React.Component {
    render() {
        return <div>
            <Child1 ref={x => this.child1 = x}/>
            <Child2 ref={x => this.child2 = x}/>
        </div>
    }

    componentDidMount() {
        console.log(this.child1, 1111);// 存储的是  子组件的实例
        console.log(this.child2, 2222);// 存储的是  子组件内部的button
        console.log(this.child1.emBox, 1112);// 存储的是  子组件内部的em
    }
}

export default Demo

